var main = document.getElementsByClassName('main')[0]
//以下属性为只读  不可修改
console.log(main.clientHeight)//内容区域 包含padding
console.log(main.offsetHeight)//内容区域  外加上边框
console.log(main.clientTop)// 距离顶部的位移  偏移量 y轴方向
console.log(main.offsetTop)//距离顶部的距离  margin
/**
 * 以屏幕左上角为参考点  坐标（0,0），坐标中，参数一表示x轴 ，参数二表示y轴
 */
console.log('-------')
console.log(main.clientWidth)//300+5+5
console.log(main.offsetWidth)//300+5+5+8+8=326
console.log(main.clientLeft)//8
console.log(main.offsetLeft)//（屏幕尺寸-326）/2

document.body.clientHeight//高
document.body.clientWidth//宽

var divBL = document.createElement('div')//创建一个div
divBL.style.backgroundColor = '#00f'//蓝色
divBL.style.width = '200px'
divBL.style.height = '300px'
divBL.style.position = 'absolute'
divBL.style.left = '0'//零可以不用写单位  不是0  则要写
divBL.style.bottom = '0'
document.body.appendChild(divBL)
//点击移动
// divBL.onclick = function(){
//     divBL.style.left = divBL.offsetLeft+10+'px'
// }

// setInterval(function(){
//     //根据指定的时间间隔 移动div
//     divBL.style.left = divBL.offsetLeft + 1 + 'px'
// },1000)

//requestAnimationFrame   调用自身

var directX =1
function move(){
    // divBL.style.left = divBL.offsetLeft + 1 + 'px'
    var w =document.body.clientWidth//页面宽度
    var cellWidth = divBL.offsetWidth 
    if(divBL.offsetLeft+cellWidth>=w){
        console.log('已经移动到结尾')
        directX = -1
    }
    if(divBL.offsetLeft<=0){
        directX = 1
    }
    divBL.style.left = divBL.offsetLeft+directX*1 + 'px'
    // else{
    //     divBL.style.left = divBL.offsetLeft + 1 + 'px'
    // }
    //每秒执行60次
     requestAnimationFrame(move)//使用js的动画帧  调用自身移动的方法
}
 move()

/**
 * var a =2
 * var b =2
 * a+b //22
 * 把a字符转换成数字的方法
 * 1.  a*1
 * 2.   number（a）
 */